import {useEffect} from 'react';
import axios from 'axios';
import { useState } from 'react';
function MyUseEffect(){
    let [num,setNum] = useState(0)
    let [cateList,setList] = useState([]);
    let [msg,setMsg] = useState("哈哈哈哈")
    // console.log(useEffect)
    // axios.get("https://apif.java.crmeb.net/api/front/category").then(res=>{
    //     console.log(res.data.data)
    // })
    // 参数一执行回调 参数二 依赖项列表 当其依赖得值发送改变时执行回调会再次执行
    // 若参数二不传则只要状态更新执行回调就会执行
    useEffect(()=>{
        //当参数二依赖项为一个空数组时 初始化执行一次
        console.log("组件渲染后")
        // 组件渲染之后执行 相当于class类组件组件渲染后生命周期
        document.title = '哈哈哈哈';
        // 发送http请求
        axios.get("https://apif.java.crmeb.net/api/front/category").then(res=>{
            console.log(res.data.data)
            setList(res.data.data)
        })
    },[num])
    return (
        <div>
            <h1>副作用函数---{num}--{msg}</h1>
            <button onClick={()=>{
                setNum(num+1)
                // setMsg("啦啦啦啦")
            }}>++</button>
            <ol>
                {
                    cateList.map((item,index)=>{
                        return <li key={index}>{item.name}</li>
                    })
                }
            </ol>
        </div>
    )
}
export default MyUseEffect;